<template>
	<scroll-view scroll-y="true" class="scroll-container">
		<!-- 1. 顶部轮播图 -->
		<view class="module">
			<text class="module-title">泉州风光</text>
			<swiper style="height: 400rpx;" indicator-dots autoplay interval="3000" duration="1000">
				<swiper-item v-for="(item, index) in bannerImgs" :key="index">
					<image :src="item" class="banner-img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 2. 城市介绍（富文本） -->
		<view class="module">
			<text class="module-title">泉州介绍</text>
			<text style="font-weight: bold; font-size: 32rpx;">海上丝绸之路起点－泉州</text>
			<view>
				<text style="font-weight: bold; font-size: 28rpx;">历史文化：</text>
				<text class="intro-content">泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</text>
			</view>
			<view class="">
				<text style="font-weight: bold; font-size: 28rpx;">著名景点：</text>
				<text class="intro-content">清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</text>
			</view>
			<view>
				<text style="font-weight: bold; font-size: 28rpx;">特色文化：</text>
				<text class="intro-content">拥有</text>
				<text style="font-size: 26rpx;color: #007AFF;">南音、</text>
				<text style="font-size: 26rpx;color: #007AFF;">木偶戏</text>
				<text class="intro-content">和</text>
				<text style="font-size: 26rpx;color: #007AFF;">闽南建筑</text>
				<text class="intro-content">等丰富的非物质文化遗产。</text>
			</view>
		</view>

		<!-- 3. 探索进度 -->
		<view class="module">
			<text class="module-title">探索进度</text>
			<view class="progress-text">当前进度：60%</view>
			<progress percent="60" show-info stroke-width="6" />
		</view>

		<!-- 4. 城市选择（三级联动picker） -->
		<view class="module">
			<text class="module-title">城市选择</text>
			<picker mode="multiSelector" :range="cityRange" :value="selectIndex" @change="onSelect">
				<view class="picker-text">
					{{ cityRange[0][selectIndex[0]] }}-{{ cityRange[1][selectIndex[1]] }}-{{ cityRange[2][selectIndex[2]] }}
				</view>
			</picker>
		</view>

		<!-- 6. 媒体展示（视频） -->
		<view class="module">
			<text class="module-title">泉州宣传</text>
			<video src="/static/city-video.mp4" controls class="video" />
		</view>

		<!-- 5. 偏好设置 -->
		<view class="module">
			<text class="module-title">偏好设置</text>
			<view class="preference-item">
				<text>出行方式：</text>
				<radio-group @change="onTravelChange">
					<label>
						<radio value="bus" checked />公交
					</label>
					<label>
						<radio value="drive" />自驾
					</label>
					<label>
						<radio value="walk" />步行
					</label>
				</radio-group>
			</view>
			<view class="preference-item">
				<switch checked @change="onSwitchChange" />显示推荐景点
			</view>
			<view class="slider-item">
				<text>探索半径: {{ radius }}km</text>
				<slider :value="radius" :min="1" :max="50" :step="1" show-value @change="onSliderChange" />
			</view>

		</view>


	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				radius: 10,
				bannerImgs: [
					'/static/city2.jpg',
					'/static/city3.jpg',
					'/static/city4.jpg',
				],
				cityRange: [
					['福建省', '广东省'],

					['泉州市', '厦门市', '福州市', '漳州市', '莆田市'],

					[

						'鲤城区', '丰泽区', '洛江区', '泉港区', '石狮市', '晋江市', '南安市', '惠安县', '安溪县', '永春县', '德化县',

						'思明区', '湖里区', '集美区', '海沧区', '同安区', '翔安区',


					]
				],
				selectIndex: [0, 0, 0],
			}
		},
		methods: {
			onSelect(e) {
				this.selectIndex = e.detail.value;
				const [prov, city, area] = [
					this.cityRange[0][this.selectIndex[0]],
					this.cityRange[1][this.selectIndex[1]],
					this.cityRange[2][this.selectIndex[2]]
				];
				console.log('选中城市：', prov + city + area);
			},
			onTravelChange(e) {
				console.log('选择的出行方式：', e.detail.value);
			},
			onSwitchChange(e) {
				console.log('是否显示推荐景点：', e.detail.value);
			},
			onSliderChange(e) {
				this.radius = e.detail.value;
				console.log('当前探索半径:', this.radius, 'km');

			}
		}
	}
</script>

<style>
	.scroll-container {
		height: 85vh;
		width: 100%;
		background-color: #f5f5f5;
		padding: 15rpx;
		box-sizing: border-box;

	}

	.module {
		border-radius: 24rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.module-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.picker-text {
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 0;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		min-height: 60rpx;
		display: flex;
		align-items: center;
	}

	.banner-img {
		width: 100%;
		height: 400rpx;
	}

	.progress-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.slider-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.slider-item text {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
		white-space: nowrap;
	}

	slider {
		flex: 1;
		/* 占满剩余空间 */
		/* min-width: 200rpx; */
	}

	.preference-item {
		margin-top: 20rpx;
	}

	.video {
		width: 100%;
		height: 400rpx;
	}

	.intro-subtitle {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 15rpx;
	}

	.intro-content {
		font-size: 26rpx;
		color: #999;
		line-height: 40rpx;
		margin-bottom: 10rpx;
	}
</style>